<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* .biv {
            width: 50px;
            height: 50px;
            background-color: transparent;
            border-radius: 50%;
            border: 5px solid rgb(214, 214, 214);
            border-top-color: aqua;
            animation: donghua 1s linear infinite;
        }

        @keyframes donghua {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        } */
    </style>
</head>

<body>
    <ul>
        <li>第1个孩子</li>
        <li>第2个孩子</li>
        <li>第3个孩子</li>
        <li>第4个孩子</li>
        <li>第5个孩子</li>
        <p>我不需要变颜色</p>
    </ul>
    <!-- <div class="biv"></div> -->
    <script>
        //点击每个小li 当前li 文字变红色
        //按照事件委托的方式
        // const ul = document.querySelector('ul')
        // ul.addEventListener('click', function (e) {
        //     // alert('aa')
        //     //e.target 点击的那个对象 选中ul里的对象
        //     //e.target.tagName得到了标签元素名，确定了元素
        //     if (e.target.tagName === 'LI') {
        //         e.target.style.color = "red"
        //     }

        // })

        // 事件委托
        const ul = document.querySelector('ul').addEventListener('click', function (e) {
            // this.style.color = 'red'
            // console.log();
            if (e.target.tagName == 'LI') {
                e.target.style.color = 'red'
            }
        })

    </script>
</body>

</html>